<!-- 商品分类 -->
<template>
  <div class="tab-container">
    <el-tabs v-model="activeName" style="margin-top: 15px" type="border-card">
      <el-tab-pane
        v-for="item in tabMapOptions"
        :key="item.key"
        :label="item.label"
        :name="item.key"
      >
        <div style="display: flex; alignitems: center">
          <keep-alive>
            <div style="display: flex; alignitems: center">
              <span style="fontsize: 12px; margin: 0 20px">商品分类：</span>
              <el-autocomplete
                v-model="state"
                popper-class="my-autocomplete"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                style="width: 400px"
                @select="handleSelect"
              >
                <i
                  slot="suffix"
                  class="el-icon-edit el-input__icon"
                  @click="handleIconClick"
                />
                <template slot-scope="{ item }">
                  <div class="name">{{ item.value }}</div>
                </template>
              </el-autocomplete>
            </div>
          </keep-alive>
          <keep-alive>
            <div style="display: flex; alignitems: center">
              <span style="fontsize: 12px; margin: 0 20px">商品搜索：</span>
              <el-input
                v-model="input"
                placeholder="请输入内容"
                style="width: 400px"
                @input="handleOnInput"
              />
              <el-button
                icon="el-icon-search"
                style="
                  width: 50px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
                @click="handleSearch"
              />
            </div>
          </keep-alive>
        </div>
        <div
          style="
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <el-button
            type="primary"
            style="margin: 10px 0"
            @click="dialogFormVisible = true"
            >添加商品</el-button
          >

          <el-dialog title="创建产品分类" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item
                label="分类名称"
                value=""
                :label-width="formLabelWidth"
                style="margin-left:-60px"
              >
                <el-input
                  v-model="form.name"
                  autocomplete="off"
                  placeholder="数码产品"
                  style="width:400px"
                ></el-input>
              </el-form-item>

              <el-form-item label="父级">
                <el-select v-model="form.region" placeholder="每日新品">
                  <el-option label="区域一">广东</el-option>
                  <el-option label="区域二">湛江</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="分类图标">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
              </el-form-item>
              <el-form-item label="排序">
                <el-input-number
                  v-model="num"
                  :min="1"
                  :max="10"
                  label="描述文字"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="状态">
                <el-switch
                  v-model="value"
                  active-color="#148eff"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>

        <keep-alive>
          <tab-pane
            v-if="activeName == item.key"
            ref="table"
            :type="item.key"
            @create="showCreatedTimes"
          />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import TabPane from "./components/TabPane";

export default {
  name: "Tab",
  components: {
    TabPane
  },
  data() {
    return {
      handleRemove: "",
      handlePictureCardPreview: "",
      value: "",
      num: 1,
      dialogImageUrl: "",
      dialogVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px",
      // 表格标题数据
      tabMapOptions: [{ label: "", key: "CN" }],
      activeName: "CN",
      createdTimes: 0,
      restaurants: [],
      state: "",
      input: ""
    };
  },
  watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`);
    }
  },
  created() {
    const tab = this.$route.query.tab;
    if (tab) {
      this.activeName = tab;
    }
  },
  mounted() {
    // 给data里的restaurants容器初始下拉框数据赋值
    this.restaurants = this.loadAll();
  },
  methods: {
    handleRedact(val) {
      this.isShow = true;
      this.distinguishType = "redact";
      this.tableItem = val;
      this.$refs.dirlog.handleSetForm(val);
    },
    showCreatedTimes() {
      this.createdTimes = this.createdTimes + 1;
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    // 下拉框初始数据
    loadAll() {
      return [
        {
          value: "全部",
          shopType: 0
        },
        {
          value: "显示",
          shopType: 1
        },
        {
          value: "不显示",
          shopType: 2
        }
      ];
    },
    // 下拉框点击每一项
    handleSelect(item) {
      this.$refs.table[0].handleOnSearch(item.shopType);
    },
    // 下拉框点击事件
    handleIconClick(ev) {
      console.log(ev);
    },
    // 点击搜索
    handleSearch() {
      this.$refs.table[0].handleOnSearch(this.input);
    },
    // 判断输入框内容是否为空
    handleOnInput() {
      if (this.input === "") {
        this.$refs.table[0].getList();
      }
    }
  }
};
</script>

<style scoped lang="scss">
.tab-container {
  margin: 30px;
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>
